import { Button, Input, message, Modal, Popconfirm, Progress, Space, Table, Form, Select } from 'antd';
import { SearchOutlined, DeleteOutlined, PlusOutlined, SyncOutlined, AppstoreFilled, EditOutlined } from '@ant-design/icons'
import styles from './index.less';
import { roleFormModelState, useDispatch, useSelector } from 'umi';
import { useEffect, useState } from 'react';

function prodProdTag() {

    const RoleList = useSelector((state: { RoleList: roleFormModelState }) => state.RoleList);
    const dispatch = useDispatch()
    console.log(RoleList, "++++++++");
    const { Option } = Select;
    useEffect(() => {
        dispatch({
            type: 'sys-role/getroleList'
        })
    }, [])
    // 删除
    // 删除接口
    async function delfirm(text: any) {
        // await dispatch({
        //     type: 'page/delPageList',
        //     payload: text.id
        // })

        // await dispatch({
        //     type: 'page/getPageList',
        //     payload: page
        // })

    }

    // 表格配置
    const columns = [
        {
            title: '角色名称',
            dataIndex: 'name',
            key: 'name',
            render: (text: any) => <a>{text}</a>,
        },
        {
            title: '备注',
            dataIndex: 'path',
            key: 'path',
        },
        {
            title: '创建时间',
            dataIndex: 'order',
            key: 'order',
        },
        {
            title: '操作',
            key: 'action',
            render: (text: any, record: any) => (

                <Space size="middle" className={styles.actionStyle}>

                    <Button style={styles.edit} icon={<EditOutlined />} type='primary'>编辑</Button>
                    <Button icon={<DeleteOutlined />} className={styles.delStyle}>删除</Button>

                </Space>
            ),
        },
    ];

    const dataSource = [
        {
            key: '1',
            path: '胡彦斌',
            order: 32,
            views: '西湖区湖底公园1号'
        },
        {
            key: '2',
            path: '胡彦斌',
            order: 32,
            views: '西湖区湖底公园1号'
        },
    ];

    // 全选单选
    // 设置多选框
    const [selectedRowKeys, changeSelectedRowKeys] = useState([])

    // 设置多选框联动效果按钮展示
    const [show, setShow] = useState(false)
    // 改变多选框
    function onSelectChange(selectedRowKeys: any) {
        changeSelectedRowKeys(selectedRowKeys);
        if (selectedRowKeys.length) {
            setShow(true);

        } else {
            setShow(false)
        }
    };
    // 将单选框赋值
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
        selections: false
    };
    // 批量删除
    // 批量删除
    function delAls() {
        selectedRowKeys.length && selectedRowKeys.map((item: any) => {
            // dispatch({
            //     type: 'page/delPageList',
            //     payload: item
            // })
            // dispatch({
            //     type: 'page/getPageList',
            //     payload: page
            // })
        })
    }

    async function confirm() {
        delAls();
        message.success('删除成功');
        setShow(false)
    }

    // 分页配置
    const paginationProps: any = {
        onChange: (page: number) => handlePageChange(page), //改变页码的函数   
    }
    // 获取当前页码
    const [page, setPage] = useState(1);
    function handlePageChange(page: number) {
        setPage(page);
    }

    return <div className={styles.prodpAge}>
        <nav>
        </nav>
        <section>
            <div className={styles.search}>

                <div className={styles.serachStatus}>
                    {/* <span className={styles.spans}>启用状态</span> */}
                    <Form.Item style={{ width: '200px' }}>
                        <Select
                            placeholder="启用状态"
                            allowClear
                        >
                            <Option value="male">未启用</Option>
                            <Option value="female">已启用</Option>
                        </Select>
                    </Form.Item>
                </div>
                <Button type="primary" icon={<SearchOutlined />}>搜索</Button>
                <Button icon={<DeleteOutlined />}>清空</Button>


            </div>
            <div className={styles.addAndDel}>
                <div>
                    <Button type="primary" icon={<PlusOutlined />}>新增</Button>
                    <Button disabled>批量删除</Button>
                </div>
                <div>
                    <span><SyncOutlined /></span>
                    <span><AppstoreFilled /></span>
                    <span><SearchOutlined /></span>
                </div>
            </div>
            <div className={styles.selectNum}>
                当前表格已选择 <span>0</span> 项  <a href="">清空</a>
            </div>
            <div className={styles.table}>
                <Table columns={columns} dataSource={dataSource} rowSelection={rowSelection} pagination={paginationProps} bordered
                />
            </div>


        </section>
    </div>
}

export default prodProdTag;